<template>
    <div>
        <SearchLine>
            <Form :model="params" inline ref="SearchUserForm">
                <FormItem :label-width="60" label="用户ID" label-for="user-id">
                    <Input element-id="user-id" placeholder="输入用户ID" v-model="params.id"></Input>
                </FormItem>
                <FormItem>
                    <Button @click="search(1)" type="primary">
                        <Icon type="md-search"></Icon>
                    </Button>
                </FormItem>
            </Form>
        </SearchLine>
        <div>
            <Button @click="showModal(1, form)" type="primary">添加</Button>
        </div>
        <Table :columns="columns" :data="data" :loading="loading" class="margin-top" border="" highlight-row stripe>
            <template slot="create" slot-scope="{ row }">{{ row.create_time | datetime }}</template>
            <template slot="action" slot-scope="{ row }">
                <Button :disabled="1 === row.id" @click="showModal(2, row)" class="margin-left" type="primary">编辑
                </Button>
                <Button :disabled="1 === row.id" @click="showModal(3,row)" class="margin-left"
                        type="error">删除
                </Button>
            </template>
        </Table>
        <div>
            <Page :current="params.page" :page-size="params.limit" :total="total"
                  @on-change="search" @on-page-size-change="changeSize" show-sizer show-total
            ></Page>
        </div>

        <Modal @on-cancel="form.name = ''; form.description = ''; showEditModal = false" footer-hide title="编辑角色"
               v-model="showEditModal"
               width="600">
            <Form :model="form" :rules="rules" ref="EditAdminForm">
                <FormItem :label-width="80" label="账户" label-for="account" prop="name">
                    <span v-if="form.id">
                        {{form.account}}
                    </span>
                    <span v-else>
                        <Input element-id="account" placeholder="角色名称, 允许a-zA-Z0-9以及_-符号"
                               v-model="form.account"></Input>
                    </span>
                </FormItem>
                <FormItem :label-width="80" label="昵称" label-for="nickname" prop="name">
                    <Input element-id="nickname" placeholder="昵称, 允许a-zA-Z0-9以及_-符号" v-model="form.nickname"></Input>
                </FormItem>
                <FormItem :label-width="80" label="密码" label-for="password">
                    <Input element-id="password" placeholder="密码" type="password" v-model="form.password"></Input>
                </FormItem>
                <FormItem class="text-center">
                    <Button @click="form.account = ''; form.password = ''; showEditModal = false">取消</Button>
                    <Button :loading="saving" @click="save" class="margin-left" type="primary">保存</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal @on-cancel="closeDeleteModal" footer-hide title="删除确认" v-model="showDeleteModal" width="600">
            <div>你确认删除 {{ form.nickname }} 吗, 请谨慎操作</div>
            <Button :loading="deleting" @click="confirmDelete" class="margin-top" long type="error">删除</Button>
        </Modal>
    </div>
</template>

<style scoped lang='scss'>

</style>
<script lang='ts'>
    import {Component} from "vue-property-decorator";
    import {AdminStruct} from "@/api/structs";
    import {
        ADMIN_API,
        ADMIN_CREATE_API,
        ADMIN_DELETE_API,
        ADMIN_UPDATE_API,
        AdminForm,
        AdminParams,
        AdminResponse
    } from "@/api/admin/Admin";
    import SearchLine from "@/components/SearchLine.vue";
    import BaseListView from "@/views/BaseListView";
    import {Form} from "view-design";
    import {BaseResponse} from "@/api/baseResponse";

    @Component({
        components: {SearchLine}
    })

    export default class Admin extends BaseListView {
        name: string = "Admin";

        title: string = "账户管理";

        loading: boolean = true;

        //搜索参数
        params: AdminParams = new AdminParams();

        total: number = 0;

        columns = [
            {type: 'selection', width: 60, align: 'center'},
            {title: "ID", key: "id"},
            {title: "昵称", key: "nickname"},
            {title: "账户", key: "account"},
            {title: "创建时间", key: "create_time"},
            {title: "操作", slot: "action", width: 250, align: 'center'},
        ];

        data: Array<AdminStruct> = new Array<AdminStruct>();

        showEditModal: boolean = false;

        showDeleteModal: boolean = false;

        //表单
        form: AdminForm = new AdminForm();

        saving: boolean = false;
        deleting: boolean = false;

        rules = {
            account: [{required: true, message: "账号信息必填", trigger: "blur"}],
            password: [{required: true, message: "密码必填", trigger: "blur"}]
        };

        created(): void {
            this.loadViewData();
        }

        search(page: number) {
            this.params.page = page;
            this.$router.replace({name: "admin-list", query: this.params})
        }

        //展示弹窗 1添加 2编辑 3删除
        showModal(type: number, row: AdminStruct) {
            if (type == 3) {
                this.form.id = row.id;
                this.form.nickname = row.nickname;
                this.showDeleteModal = true;
                return;
            }
            if (type == 1) {//add
                this.form.id = 0;
                this.form.account = "";
                this.form.password = "";
                this.form.nickname = "";
            } else if (type == 2) {//edit
                this.form.account = row.account;
                this.form.password = row.password;
                this.form.nickname = row.nickname;
                this.form.id = row.id;
            }

            this.showEditModal = true;
        }

        closeDeleteModal() {
            this.showDeleteModal = false
        }

        loadData() {
            let params = this.params;
            this.loading = true;
            this.axios.get<AdminResponse>(ADMIN_API, {params}).then(response => {
                this.loading = false;

                if (response.data.code) {
                    this.$Message.error(response.data.message);

                    return
                }

                this.params.limit = response.data.pagination.limit;
                this.params.page = response.data.pagination.current_page;
                this.total = response.data.pagination.total;

                this.data = new Array<AdminStruct>();
                response.data.data.forEach(post => {
                    let item = new AdminStruct();
                    Object.assign(item, post);

                    this.data.push(item)
                })
            })
        }

        //保存
        save() {
            let form = this.$refs.EditAdminForm as Form;
            form.validate(valid => {
                if (valid) {
                    this.saving = true;
                    let api: string = ADMIN_UPDATE_API;
                    if (this.form.id == 0) {
                        api = ADMIN_CREATE_API;
                    }
                    this.axios.post<BaseResponse>(api, this.form).then(response => {
                        this.saving = false;

                        if (response.data.code) {
                            this.$Message.error(response.data.message);

                            return;
                        }
                        this.$Message.success("保存成功");
                        this.loadData();

                        this.form = new AdminForm();
                        this.showEditModal = false;
                    })
                }
            })
        }

        confirmDelete(a: any) {
            this.axios.post<AdminResponse>(ADMIN_DELETE_API, {"id": this.form.id}).then(response => {
                this.deleting = false;
                if (response.data.code) {
                    this.$Message.error(response.data.message);

                    return;
                }
                this.$Message.success("删除成功");
                this.params.page = 1;
                this.loadData();

                this.form = new AdminForm();
                this.showDeleteModal = false;
            })
        }

        //分页 改变limit
        changeSize(size: number) {
            this.params.limit = size;
            this.search(this.params.page);
        }

    }


</script>